<template>
    <div class="Organizationalstructure">
        <div class="DepartmentName">
            <p class="title"><el-avatar :size="25" :src="circleUrl" class="avater"></el-avatar>公司名称</p>
            <ul class="department">
                <li v-for="(item,index) in department" :key="index">{{item}}</li>
            </ul>
        </div>
        <div class="departmentmenmer">
            <div class="buttonbox">
                <div class="left">
                    <el-button type="primary" class="add" @click="add()"><i class="el-icon-plus"></i>新增部门</el-button>
                    <div class="question">
                        <i class="el-icon-question"></i>
                        帮助提示
                    </div>
                </div>
                <div class="right">
                    <el-button plain class="hand">手动排序</el-button>
                    <el-button plain class="hand">按字母排序</el-button>
                </div>
            </div>
            <!-- 添加部门 -->
            <el-dialog title="新增部门" :visible.sync="dialogFormVisible">
                <el-form :model="form" :rules="rules" ref="form">
                    <el-form-item label="上级部门" :label-width="formLabelWidth" prop='region'>
                        <el-select v-model="form.region" placeholder="请选择上级部门">
                            <el-option v-for="(item,index) in department" :key="index" :label="item" :value="item"></el-option>
                            <!-- <el-option label="部门二" value="beijing"></el-option> -->
                        </el-select>
                    </el-form-item>
                    <el-form-item label="部门名称" :label-width="formLabelWidth" class="appart" prop='DepartmentName'>
                        <el-input v-model="form.DepartmentName" autocomplete="off" placeholder="请输入部门名称" ></el-input>
                    </el-form-item>
                    <el-form-item label="负责人" :label-width="formLabelWidth" class="appart" prop='responsibleofficer'>
                        <el-input v-model="form.responsibleofficer" autocomplete="off" placeholder="请输入负责人"></el-input>
                    </el-form-item>
                    <el-form-item label="成员数量" :label-width="formLabelWidth" class="appart" prop='Numbermembers'>
                        <el-input v-model="form.Numbermembers" autocomplete="off" placeholder="请输入成员数量"></el-input>
                    </el-form-item>
                    <el-form-item label="部门描述" :label-width="formLabelWidth" class="DepartmentDescription" >
                        <el-input v-model="form.DepartmentDescription" autocomplete="off" placeholder="请输入部门描述"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="addpartclose('form')">取 消</el-button>
                    <el-button type="primary" @click="addpartsubmit('form')">确 定</el-button>
                </div>
            </el-dialog>
            <div class="datatable">
                <el-table
                :data="tableData"
                border
                stripe
                style="width: 100%">
                    <el-table-column
                        prop="DepartmentName"
                        label="部门名称"
                        width="180">
                    </el-table-column>
                    <el-table-column
                        prop="Numbermembers"
                        label="成员数量"
                        width="100">
                    </el-table-column>
                    <el-table-column
                        prop="responsibleofficer"
                        label="负责人员"
                        width="140">
                    </el-table-column>
                    <el-table-column
                        prop="DepartmentDescription"
                        label="部门描述"
                        width="180">
                    </el-table-column>
                    <el-table-column
                        prop="Enable"
                        label="启用"
                        width="80">
                        <el-col :sm="12" :lg="6" class="success">
                            <el-result icon="success" title="" subTitle="" style="padding:0">
                            </el-result>
                        </el-col>
                    </el-table-column>
                    <el-table-column
                        prop="updatetime"
                        label="更新时间"
                        width="150">
                    </el-table-column>
                    <el-table-column
                        prop="operate"
                        label="操作"
                        width="159">
                        <template slot-scope="scope">
                            <i class="el-icon-edit"></i>
                            <span style="margin-left: 5px;margin-right:5px" @click="edit(scope.row)">{{ scope.row.edit }}</span>
                            <i class="el-icon-delete"></i>
                            <span style="margin-left: 5px;margin-right:5px" @click="del(scope.row.department_id)">{{ scope.row.del }}</span>
                        </template>
                    </el-table-column>
                </el-table>
                <Pagecurren :totalpage="totalpage" :currentPage2="currentPage2" @send="getpage" @send-pagelimit="getpagelimit" :pagelimit="pagelimit"></Pagecurren>
            </div>
        </div>
    </div>
</template>

<script>
import Pagecurren from '../components/Pagecurren.vue'
export default {
    components:{
        Pagecurren
    },
    data(){
        return{
            circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
            department:['总裁办','行政部','人事部','销售部','技术部','客服部','售后部','财务部','市场部'],
            // tableData:[
            //     {
            //         DepartmentName: '部门名称',
            //         Numbermembers: '30',
            //         responsibleofficer:'李小明',
            //         DepartmentDescription:'暂无相关描述',
            //         Enable:'水费',
            //         updatetime:'2019-08-25 14:54',
            //         edit:'编辑',
            //         del:'删除',
            //     }, 
            //     {
            //         DepartmentName: '部门名称',
            //         Numbermembers: '30',
            //         responsibleofficer:'李小明',
            //         DepartmentDescription:'暂无相关描述',
            //         Enable:'水费',
            //         updatetime:'2019-08-25 14:54',
            //         edit:'编辑',
            //         del:'删除',
            //     }, 
            //     {
            //         DepartmentName: '部门名称',
            //         Numbermembers: '30',
            //         responsibleofficer:'李小明',
            //         DepartmentDescription:'暂无相关描述',
            //         Enable:'水费',
            //         updatetime:'2019-08-25 14:54',
            //         edit:'编辑',
            //         del:'删除',
            //     }, 
            //     {
            //         DepartmentName: '部门名称',
            //         Numbermembers: '30',
            //         responsibleofficer:'李小明',
            //         DepartmentDescription:'暂无相关描述',
            //         Enable:'水费',
            //         updatetime:'2019-08-25 14:54',
            //         edit:'编辑',
            //         del:'删除',
            //     }, 
            //     {
            //         DepartmentName: '部门名称',
            //         Numbermembers: '30',
            //         responsibleofficer:'李小明',
            //         DepartmentDescription:'暂无相关描述',
            //         Enable:'水费',
            //         updatetime:'2019-08-25 14:54',
            //         edit:'编辑',
            //         del:'删除',
            //     }, 
            //     {
            //         DepartmentName: '部门名称',
            //         Numbermembers: '30',
            //         responsibleofficer:'李小明',
            //         DepartmentDescription:'暂无相关描述',
            //         Enable:'水费',
            //         updatetime:'2019-08-25 14:54',
            //         edit:'编辑',
            //         del:'删除',
            //     }, 
            //     {
            //         DepartmentName: '部门名称',
            //         Numbermembers: '30',
            //         responsibleofficer:'李小明',
            //         DepartmentDescription:'暂无相关描述',
            //         Enable:'水费',
            //         updatetime:'2019-08-25 14:54',
            //         edit:'编辑',
            //         del:'删除',
            //     }, 
            //     {
            //         DepartmentName: '部门名称',
            //         Numbermembers: '30',
            //         responsibleofficer:'李小明',
            //         DepartmentDescription:'暂无相关描述',
            //         Enable:'水费',
            //         updatetime:'2019-08-25 14:54',
            //         edit:'编辑',
            //         del:'删除',
            //     }, 
            //     {
            //         DepartmentName: '部门名称',
            //         Numbermembers: '30',
            //         responsibleofficer:'李小明',
            //         DepartmentDescription:'暂无相关描述',
            //         Enable:'水费',
            //         updatetime:'2019-08-25 14:54',
            //         edit:'编辑',
            //         del:'删除',
            //     }, 
            //     {
            //         DepartmentName: '部门名称',
            //         Numbermembers: '30',
            //         responsibleofficer:'李小明',
            //         DepartmentDescription:'暂无相关描述',
            //         Enable:'水费',
            //         updatetime:'2019-08-25 14:54',
            //         edit:'编辑',
            //         del:'删除',
            //     }, 
            //     {
            //         DepartmentName: '部门名称',
            //         Numbermembers: '30',
            //         responsibleofficer:'李小明',
            //         DepartmentDescription:'暂无相关描述',
            //         Enable:'水费',
            //         updatetime:'2019-08-25 14:54',
            //         edit:'编辑',
            //         del:'删除',
            //     }, 
            //     {
            //         DepartmentName: '部门名称',
            //         Numbermembers: '30',
            //         responsibleofficer:'李小明',
            //         DepartmentDescription:'暂无相关描述',
            //         Enable:'水费',
            //         updatetime:'2019-08-25 14:54',
            //         edit:'编辑',
            //         del:'删除',
            //     }, 
            // ],
            tableData:[],
            datalists:[],
            totalpage:300,
            currentPage2:1,
            pagelimit:10,
            dialogFormVisible: false,
            form: {
                DepartmentName:'',  //部门名称
                Numbermembers:'',   //成员数量
                responsibleofficer:'',  //负责人
                DepartmentDescription:'',   //部门描述
            },
            rules:{
                DepartmentName: [
                    { required: true, message: '请输入部门名称', trigger: 'blur' },
                    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                ],
                region: [
                    { required: true, message: '请选择上级部门', trigger: 'change' }
                ],
                responsibleofficer:[
                    { required: true, message: '请输入负责人', trigger: 'blur' },
                ],
                Numbermembers:[
                    { required: true, message: '请输入成员数量', trigger: 'blur' },
                ],
            },
            formLabelWidth: '120px'
        }
    },
    mounted(){
        this.$axios.get('http://127.0.0.1/departmentlists',{
            headers: {
                'Authorization': `Bearer ${localStorage.getItem('ticket')}`,
                'Content-Type': 'application/json' // 如果需要发送 JSON 数据，则包含此行 // 设置请求头
            },
        }).then(res=>{
            this.datalists=res.data
            this.totalpage=res.data.length
            this.tableData=res.data.slice(0,10)
        }).catch(err=>{
            console.log(err)
        })
    },
    watch:{
        currentPage2:{
            handler(val,oldval){
                this.tableData=this.datalists.slice((val-1)*this.pagelimit,val*this.pagelimit)
            },
        },
        pagelimit:{
            handler(val,oldval){
                this.tableData=this.datalists.slice((this.currentPage2-1)*val,val*this.currentPage2)
            }
        },
        datalists:{
            handler(val,oldval){
                val.forEach(item=>{
                    item.updatetime=this.moment(item.updatetime).format("YYYY-MM-DD HH:mm:ss")
                })
            }
        }
    },
    methods:{
        getpage(data){
            this.currentPage2=data
        },
        getpagelimit(data){
            this.pagelimit=data
        },
        edit(txt){
            console.log('编辑',txt)
            this.form=txt
            this.dialogFormVisible=true
        },
        del(i){
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$axios.post('http://127.0.0.1/departmentlistsdel',{
                    id:i
                },{
                    headers: {
                        'Authorization': `Bearer ${localStorage.getItem('ticket')}`,
                        'Content-Type': 'application/json' // 如果需要发送 JSON 数据，则包含此行 // 设置请求头
                    },
                }).then(res=>{
                    this.datalists=res.data
                    this.totalpage=res.data.length
                    this.tableData=res.data.slice(0,10)
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                }).catch(err=>{
                    console.log(err)
                }) 
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });          
            });
            
        },
        // 添加部门
        add(){
            this.dialogFormVisible=true
        },
        addpartsubmit(formName){
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    // alert('submit!');
                    // console.log(this.form)
                    console.log(this.form.department_id)
                    if(this.form.department_id){
                        this.$axios.post('http://127.0.0.1/departmentlistsupdate',{
                            ...this.form
                        },{
                            headers: {
                                'Authorization': `Bearer ${localStorage.getItem('ticket')}`,
                                'Content-Type': 'application/json' // 如果需要发送 JSON 数据，则包含此行 // 设置请求头
                            },
                        }).then(res=>{
                            this.datalists=res.data
                            this.totalpage=res.data.length
                            this.tableData=res.data.slice((this.currentPage2-1)*this.pagelimit,this.currentPage2*this.pagelimit)
                            this.dialogFormVisible=false
                            this.$refs[formName].resetFields();
                            this.form.DepartmentDescription=''
                            this.$message({
                                message: '数据修改成功',
                                type: 'success'
                            });
                        }).catch(err=>{
                            console.log(err)
                        })
                    }else{
                        this.$axios.post('http://127.0.0.1/departmentlistsinsert',{
                            ...this.form
                        },{
                            headers: {
                                'Authorization': `Bearer ${localStorage.getItem('ticket')}`,
                                'Content-Type': 'application/json' // 如果需要发送 JSON 数据，则包含此行 // 设置请求头
                            },
                        }).then(res=>{
                            this.datalists=res.data
                            this.totalpage=res.data.length
                            this.tableData=res.data.slice((this.currentPage2-1)*this.pagelimit,this.currentPage2*this.pagelimit)
                            this.dialogFormVisible=false
                            this.$refs[formName].resetFields();
                            this.$message({
                                message: '数据添加成功',
                                type: 'success'
                            });
                        }).catch(err=>{
                            console.log(err)
                        })
                    }
                    
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        addpartclose(formName){
            this.dialogFormVisible=false
            this.$refs[formName].resetFields();
        }
    },
    
}
</script>

<style lang="scss" scoped>
    .Organizationalstructure{
        width: 1260px;
        margin: auto;
        height: 150%;
        overflow: scroll;
        scrollbar-width: none;
        display: flex;
        justify-content: space-between;
        .DepartmentName{
            width: 220px;
            background: #fff;
            height: 100%;
            padding: 40px 20px 20px;
            box-sizing: border-box;
            .title{
                font-size: 14px;
                color: #0079fe;
                display: flex;
                align-items: center;
                // justify-content: center;
                .avater{
                    margin-right: 10px;
                }
            }
            .department{
                li{
                    width: 180px;
                    height: 40px;
                    line-height: 40px;
                    // text-align: center;
                    padding-left: 40px;
                    box-sizing: border-box;
                    font-size: 14px;
                    color: #999;
                }
            }
        }
        .departmentmenmer{
            width: 1020px;
            height: 100%;
            background-color: #fff;
            padding: 15px;
            box-sizing: border-box;
            // margin-left: 20px;
            .buttonbox{
                display: flex;
                justify-content: space-between;
                .rught{
                    .hand:hover{
                        border-color: #0079fe;
                        color: #0079fe;
                    }
                }
            }
            .left{
                display: flex;
                align-items: center;
                .add{
                    width: 100px;
                    height: 35px;
                    background-color: #0079fe;
                    padding: 0;
                    .el-icon-plus{
                        font-weight: 700;
                        margin-right: 5px;
                    }
                }
                .add:hover{
                    background-color: #66b1ff !important;
                    color: #fff !important;
                }
                .question{
                    font-size: 14px;
                    margin-left: 20px;
                    color: #999;
                }
            }
             // 数据表格
            .datatable{
                margin-top: 20px;
                ::v-deep .has-gutter th{
                    height: 45px !important;
                    background-color: #f5f5f5;
                    box-sizing: border-box;
                    padding: 0 !important;
                    font-size: 14px;
                    color: #666666;
                    font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑' !important;
                }
                ::v-deep .el-table__row td{
                    height: 50px !important;
                    padding: 0 !important;
                }
                ::v-deep .el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell {
                    background-color: #f9f9f9;
                }
                ::v-deep .el-table__row .el-table__cell:nth-child(1){
                    color: #0079fe !important;
                }
                ::v-deep .el-table__row .el-table__cell:nth-child(2){
                    color: #666 !important;
                    text-align: center !important;
                }
                ::v-deep .el-table__row .el-table__cell:nth-child(4){
                    color: #999 !important;
                }
                ::v-deep .el-table__row .el-table__cell:nth-last-child(1){
                    text-align: center;
                    color: #0079fe;
                    // cursor: pointer;
                }
                ::v-deep .el-table__row .el-table__cell:nth-last-child(1) span:hover{
                    cursor: pointer;
                    text-decoration: underline !important;
                    // color: #4a4a4a;
                }
                ::v-deep .el-table__row .el-table__cell{
                    color: #666666;
                    font-size: 12px;
                }
                ::v-deep .el-table__row:hover{
                    background-color: inherit !important;
                }
                ::v-deep .el-table__row .el-table__cell:nth-child(5){
                    color: #999 !important;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    .cell{
                        display: flex;
                        justify-content: center;
                    }
                    .el-result{
                        padding: 0;
                    }
                }
                ::v-deep .el-result__icon svg {
                    width: 20px;
                    height: 20px;
                }
            }
            .appart{
                width: 550px;
            }
        }
    }
</style>